<script lang="ts" setup></script>

<template>
  <div class="border-box4-wrap">
    <div id="toral" grid grid-row-1 grid-cols-1 gap-20 justify-items-start content-center w-full>
      <slot />
    </div>
  </div>
</template>

<style scoped>
.border-box4-wrap {
  font-size: 20px;
  line-height: 1;
  color: #fff;
  border: 3px solid;
  border-image: linear-gradient(90deg, transparent, rgba(72, 172, 255, 1), transparent) 2 2;
  background: rgba(69, 170, 255, 0.5);
  border-left: 0;
  border-right: 0;
  padding: 20px;
}
.border-box4-wrap::before {
  width: 15px;
  height: 15px;
  border-left: 2px solid #45aaff;
  border-top: 2px solid #45aaff;
  content: '';
  position: absolute;
  left: 0;
  top: 0px;
}

.border-box4-wrap::after {
  width: 15px;
  height: 15px;
  border-right: 2px solid #45aaff;
  border-top: 2px solid #45aaff;
  content: '';
  position: absolute;
  right: 0;
  top: 0px;
}
#toral::before {
  position: absolute;
  bottom: 0px;
  left: 0;
  width: 15px;
  height: 15px;
  border-left: 2px solid #45aaff;
  border-bottom: 2px solid #45aaff;
  content: '';
}
#toral::after {
  position: absolute;
  bottom: 0px;
  right: 0;
  width: 15px;
  height: 15px;
  border-right: 2px solid #45aaff;
  border-bottom: 2px solid #45aaff;
  content: '';
}
</style>
